<template>
	<view class="bg-white" :style="{'padding-bottom': safeBottom +'px'}">
		<view class="flex" style="height: 100rpx;">
		  <view class="flex align-center justify-evenly" style="width: 250rpx;">
				<view class="position-relative" style="width: 125rpx;">
					<view class="flex flex-column align-center justify-between" @click="toCart">
						<image src="/static/index/dyBottomBuy/gwc.png" style="width: 40rpx;height: 40rpx;"></image>
						<text class="u-font-24" >购物车</text>
					</view>
					<!-- #ifndef APP-NVUE -->
					<u-badge absolute type="error" size="mini" :count="totalGoods" :offset="[0,0]"></u-badge>
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					<view class="position-absolute right-0 top-0 rounded-15 main-bg-color" style="height: 30rpx;border: 1px solid var(--mainColor);">
						<text class="u-font-24 text-white u-p-x-5" style="line-height: 30rpx;">{{totalGoods}}</text>
					</view>
					<!-- #endif -->
				</view>
				<view class="flex flex-column align-center justify-between" style="width: 125rpx;" @click="toSupplier">
					<image src="/static/index/dyBottomBuy/dp.png" style="width: 40rpx;height: 40rpx;"></image>
					<text class="u-font-24">店铺</text>
				</view>
		  </view>
			<view class="flex-1 flex" style="width: 60%;">
			  <view class="flex-1 flex flex-column align-center justify-center font text-white" style="background-color: #f29a3b;" @click="$emit('buySelf')">
					<text class="text-white u-font-24">单独购买</text>
					<text class="text-white u-font-24">¥ {{bottomInfo.goods_price}}</text>
				</view>
			  <view class="flex-1 flex flex-column align-center justify-center font text-white" style="background-color: #d45643;" @click="$emit('buyGroup')">
					<text class="text-white u-font-24">发起拼单</text>
					<text class="text-white u-font-24">¥ {{bottomInfo.groupPrice}}</text>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	var safeBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
	import { mapState } from "vuex";
	export default {
		name:"group-detail-bottom",
		props: {
			bottomInfo: {
				type: Object,
				default() {
					return {}
				}
			},
		},
		data() {
			return {
				safeBottom: 0
			};
		},
		computed: {
			...mapState('user', ['userCarts','totalGoods']),
		},
		created() {
			this.safeBottom = safeBottom
		},
		methods: {
			buy() {
				this.$emit('buy')
			},
			toCart() {
				uni.switchTab({
					url: '/pages/tabbar/cart/cart'
				})
			},
			collect() {
				this.$emit('collect')
			},
			seckill() {
				this.$emit('seckill')
			},
			toSupplier() {
				uni.navigateTo({
					url:'/pages/supplierPage/supplierIndex/supplierIndex?' +`id=${this.merchId}&type=1`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
